<template>
  <ul>
    <h1>{{screenName}}</h1>
    <li v-for="todo in todos" :key="todo.text">
      <input :checked="todo.done" @change="toggle(todo)" type="checkbox">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
    </li>
    <li><input @keyup.enter="addTodo" placeholder="What needs to be done?"></li>
  </ul>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
// import CryptoJS from "crypto-js"
const CryptoJS = require("crypto-js")

export default {
  // layout:'defaultTemplate',
  computed: {
    todos () {
      return this.$store.state.todos.list
    },
    ...mapGetters([
      'screenName'
    ])
  },
  created(){
    console.log(CryptoJS)
  },
  methods: {
    addTodo (e) {
      console.log(e.target.value)
      this.$store.commit('todos/add', e.target.value)
      e.target.value = ''
    },
    ...mapMutations({
      toggle: 'todos/toggle'
    })
  }
}
</script>

<style>
.done {
  text-decoration: line-through;
}
</style>
